<template>
  <div class="app-container">

    <!--查询列-->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="业务类型" prop="projectName">
        <el-select v-model="queryParams.businessType" placeholder="业务类型" clearable size="small">
          <el-option
            v-for="dict in businessTypeOptions"
            :key="dict.key"
            :label="dict.value"
            :value="dict.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="操作人员" prop="createBy">
        <el-input
          v-model="queryParams.createUid"
          placeholder="请输入操作人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="消息状态" prop="noticeType">
        <el-select v-model="queryParams.workerStatus" placeholder="消息状态" clearable size="small">
          <el-option
            v-for="dict in workerStatusOptions"
            :key="dict.key"
            :label="dict.value"
            :value="dict.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="执行时间">
        <el-date-picker
          v-model="promotionDate"
          class="filter-item"
          type="daterange"
          align="right"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--操作列-->
    <el-row :gutter="10" class="mb8">
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <!--数据表列-->
    <el-table :key="tableKey" v-loading="listLoading" :data="list" fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
      <el-table-column label="消息id" width="130px">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="消息状态" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.workerStatusName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行次数" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="openId" width="180px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.openId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务id" width="190px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.businessId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务类型" width="80px" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
          <span>{{ row.templateName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后执行人" width="180px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.updateUid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后执行时间" width="180px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row,$index}">
          <p>
            <el-button type="text" size="mini" icon="el-icon-view" @click="handleView(row)">详情</el-button>
          </p>
          <p>
            <el-button type="text" size="mini" icon="el-icon-view" @click="handleUrl(row.url)">页面</el-button>
            <el-button type="text" size="mini" icon="el-icon-refresh" @click="handleRetry(row)">重试</el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <!--分页列-->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />

    <!-- 详细页面 -->
    <el-dialog title="操作日志详细" :visible.sync="dialogVisible" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{ form.data }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作时间：">{{ parseTime(form.updateTime) }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="form.status === 1" label="异常信息：">{{ form.errorMsg }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
import { tableInfo, crudUtil, sortUtil } from '@/utils/future/toolkit'
import { fetchMsgWorkerList, fetchMsgWorker, retryMsgWorker } from '@/api/devops/support'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

const statusUIMap = { false: 'success', true: 'danger' }
const statusMap = { true: '禁用', false: '启用' }
const workerStatusOptions = [
  { key: 0, value: '初始化' },
  { key: 10, value: '待执行' },
  { key: 20, value: '执行中' },
  { key: 30, value: '完成' },
  { key: 40, value: '异常' }
]

const businessTypeOptions = [
  { key: 10, value: '登录通知' },
  { key: 20, value: '返利订单通知' },
  { key: 30, value: '报表通知' }
]

export default {
  name: 'RebateActivity',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(activityStatus) {
      return statusMap[activityStatus]
    },
    statusUIMapFilter(activityStatus) {
      return statusUIMap[activityStatus]
    }
  },
  data() {
    const tableData = {
      idKey: 'id',
      showSearch: true, // 显示搜索条件
      temp: {},
      queryParams: {
        projectName: undefined,
        createUid: undefined,
        activityStatus: null
      },
      promotionDate: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      workerStatusOptions: workerStatusOptions,
      businessTypeOptions: businessTypeOptions,
      dialogVisible: false,
      form: {}
    }

    return Object.assign(tableData, tableInfo)
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      var that = this
      const queryParams = that.addDateRange(this.queryParams, this.promotionDate)
      that.queryParams = queryParams
      crudUtil.getList(that, fetchMsgWorkerList)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.promotionDate = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.dialogVisible = true
      this.form = row
    },
    // 重试操作
    handleRetry(row) {
      const title = '是否重试该任务？'
      var that = this
      that.$confirm(title, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        retryMsgWorker(row.id).then(res => {
          Notification({ title: 'Success', message: '操作成功', type: 'success', duration: 2000 })
          this.handleQuery()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消' })
      })
    },
    // 跳转链接
    handleUrl(url) {
      window.open(url, '_blank')
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        sortUtil.sortByID(order)
      }
    }
  }
}
</script>
